<template>
	<view class="back" :style="{ marginTop: mp.menuTop + 'px' }" :class="{ can_back: !can_back }">
		<view class="dy-iconfont" :class="[custom ? 'custom-back' : 'get-back', icon]" @click="goBack"></view>
		<text class="back-text" @click="goBack">
			<slot></slot>
		</text>
	</view>
</template>
<script>
import mp from '@/mixins/mp.js';
export default {
	name: 'empty',
	mixins: [mp],
	props: {
		custom: {
			type: Boolean,
			default: false
		},
		icon: {
			type: String,
			default: 'icon-fanhui'
		},
		can_back: {
			type: Boolean,
			default: true
		}
	},
	data() {
		return {};
	},
	methods: {
		goBack() {
			if (this.can_back) {
				uni.navigateBack();
			} else {
				this.$emit('goBack');
			}
		}
	}
};
</script>

<style lang="scss" scoped>
.back {
	width: 100%;
	position: fixed;
	top: 0;
	display: flex;
	align-items: center;
	height: 32px;
	transform: translateZ(0);
	z-index: 99999;
	&.can_back {
		position: absolute;
	}

	.custom-back {
		display: flex;
		align-items: center;
		justify-content: center;
		flex-shrink: 0;
		width: 36rpx;
		height: 36rpx;
		color: #000;
		font-size: 36rpx;
		background: rgba(255, 255, 255, 0.6);
		border-radius: 50%;
		padding: 10rpx;
		margin-left: 36rpx;
	}

	.get-back {
		flex-shrink: 0;
		width: 36rpx;
		height: 36rpx;
		color: #ffffff;
		line-height: 36rpx;
		font-size: 42rpx;
		margin-right: 16rpx;
		vertical-align: middle;
	}

	.back-text {
		display: inline-block;
		font-weight: 500;
		font-size: 32rpx;
		color: #ffffff;
		line-height: 36rpx;
		vertical-align: middle;
	}
}
</style>
